<template>
  <view class="page-user">
    <u-navbar :bgColor="navbarBgColor" placeholder title="个人中心">
      <template #left></template>
    </u-navbar>
    <view class="px-16 pb-16">
      <view class="flex py-30 items-center justify-between">
        <view class="flex items-center" @click="handelUserCard">
          <u-avatar :src="customerInfo.avatar" size="100rpx"></u-avatar>
          <template v-if="hasLogin">
            <view class="ml-12">
              <view class="mb-12 u-line-1 w-200"
                >{{ customerInfo.nickname || customerInfo.username }}
              </view>
              <u-text
                mode="phone"
                :text="customerInfo.phone"
                format="encrypt"
              ></u-text>
            </view>
          </template>
          <view class="ml-12" v-else>点击头像登录</view>
        </view>
        <view
          class="flex-col items-center"
          v-if="hasLogin"
          @click="handelChangeIdentity"
        >
          <text class="iconfont message-icon">&#xe606;</text>
          <view class="text-12">{{ identity.name }}</view>
        </view>
      </view>
      <view class="accountInfo mb-12" v-if="isAuthority">
        <view class="accountInfo-top" @click="handelAccount">
          <view class="text-16 pl-24">我的账户</view>
          <view class="grid-3 mt-20">
            <view class="flex-col items-center gap-12">
              <view class="text-24">{{ customerObj.balance.balance }}</view>
              <u-icon
                name="arrow-right"
                size="24rpx"
                color="#fff"
                label-color="#fff"
                label-pos="left"
                label-size="24rpx"
                label="可提现金额"
              ></u-icon>
            </view>
            <view class="flex-col items-center gap-12">
              <view class="text-24">{{
                customerObj.pendingSettlement.balance
              }}</view>
              <u-icon
                name="arrow-right"
                size="24rpx"
                color="#fff"
                label-color="#fff"
                label-pos="left"
                label-size="24rpx"
                label="待结算金额"
              ></u-icon>
            </view>
            <view class="flex-col items-center gap-12">
              <view class="text-24">{{
                customerObj.accumulatedIncome.balance
              }}</view>
              <u-icon
                name="arrow-right"
                size="24rpx"
                color="#fff"
                label-color="#fff"
                label-pos="left"
                label-size="24rpx"
                label="累计已结算金额"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="p-12">
          <view class="flex justify-between mb-8">
            <view
              :class="{
                'account-tab-item': true,
                'account-tab-item-active': index === currentAccountTab,
              }"
              @click="changeAccountTab(index)"
              v-for="(item, index) in accountTabList"
            >
              {{ item.name }}
            </view>
          </view>
          <u-line></u-line>
          <view class="flex justify-around">
            <view class="order-info-item mt-12">
              <view>0</view>
              <view class="text-14 color-gray mt-8">订单量</view>
            </view>
            <view class="order-info-item mt-12">
              <view>0</view>
              <view class="text-14 color-gray mt-8">销售额</view>
            </view>
            <view class="order-info-item mt-12">
              <view>0</view>
              <view class="text-14 color-gray mt-8">待结算金额</view>
            </view>
            <view class="order-info-item mt-12">
              <view>0</view>
              <view class="text-14 color-gray mt-8">已结算金额</view>
            </view>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card-title">
          <text class="text-bold">我的订单</text>
          <u-icon
            name="arrow-right"
            label-size="24rpx"
            label="全部订单"
            label-color="#999"
            label-pos="left"
            size="24rpx"
            color="#999999"
            @click="goToMyOrder(0)"
          ></u-icon>
        </view>
        <view class="grid-5">
          <view
            class="flex-col items-center"
            v-for="(item, index) in orderList"
            @click="goToMyOrder(index)"
          >
            <view class="iconfont order-icon" v-html="item.icon"></view>
            <view class="text-12 pt-8">{{ item.name }}</view>
          </view>
        </view>
      </view>

      <view class="grid-2 gap-12 mt-12">
        <view class="h-44 coupon-card" @click="goIntegralCenter">
          <view>
            <view class="pb-8 text-16 text-bold">积分</view>
            <u-icon
              name="arrow-right"
              label-size="24rpx"
              label="暂无积分可用"
              label-color="#999"
              label-pos="left"
              size="24rpx"
              color="#999999"
            ></u-icon>
          </view>
        </view>
        <view class="h-44 coupon-card" @click="goCouponList">
          <view>
            <view class="pb-8 text-16 text-bold">优惠卷</view>
            <u-icon
              name="arrow-right"
              label-size="24rpx"
              label="暂无优惠券可用"
              label-color="#999"
              label-pos="left"
              size="24rpx"
              color="#999999"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="card mt-12" v-if="isAuthority" @click="navToMyCustomer">
        <view class="card-title">
          <text class="text-bold">我的客户</text>
          <u-icon
            name="arrow-right"
            label-size="24rpx"
            label="客户管理"
            label-color="#999"
            label-pos="left"
            size="24rpx"
            color="#999999"
          ></u-icon>
        </view>
        <view class="flex justify-between px-12 mt-12 pb-12">
          <view>
            <view class="text-12 color-gray">今日新增客户数</view>
            <view class="text-24 mt-4 flex items-center">
              <text>0</text>
              <u-icon name="arrow-right" size="24rpx" color="#666"></u-icon>
            </view>
            <view class="text-12 color-gray mt-12"> 昨日-- </view>
          </view>
          <view>
            <view class="text-12 color-gray">今日下单客户数</view>
            <view class="text-24 mt-4 flex items-center">
              <text>0</text>
              <u-icon name="arrow-right" size="24rpx" color="#666"></u-icon>
            </view>
            <view class="text-12 color-gray mt-12"> 昨日-- </view>
          </view>

          <view>
            <view class="text-12 color-gray">累计客户总数</view>
            <view class="text-24 mt-4 flex items-center">
              <text>0</text>
              <u-icon name="arrow-right" size="24rpx" color="#666"></u-icon>
            </view>
          </view>
        </view>
        <!--        <view class="my-10 px-4 py-8 goods-recommend flex items-center">-->
        <!--          <u-image-->
        <!--            width="40rpx"-->
        <!--            height="40rpx"-->
        <!--            src="https://cdn.uviewui.com/uview/album/1.jpg"-->
        <!--          ></u-image>-->
        <!--          <view class="text-12 ellipsis-1 flex-1 flex">-->
        <!--            <view class="mx-4">-->
        <!--              <u-text-->
        <!--                mode="name"-->
        <!--                text="张三三"-->
        <!--                size="24rpx"-->
        <!--                format="encrypt"-->
        <!--              ></u-text>-->
        <!--            </view>-->

        <!--            <text class="color-primary">加购了商品</text>-->
        <!--            <text>2箱减5元商品好物</text>-->
        <!--          </view>-->
        <!--          <view>-->
        <!--            <u-icon-->
        <!--              name="arrow-right"-->
        <!--              size="28rpx"-->
        <!--              label="2件商品"-->
        <!--              label-pos="left"-->
        <!--              label-size="12"-->
        <!--              color="#333"-->
        <!--            ></u-icon>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
      <view class="card mt-12">
        <view class="card-title">
          <text class="text-bold">我的工具</text>
        </view>
        <view class="grid-4">
          <view
            class="flex-col items-center"
            v-for="item in toolList"
            @click="navTo(item.routerName)"
          >
            <view class="iconfont order-icon" v-html="item.icon"></view>
            <view class="text-12 pt-8">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="card mt-12">
        <view class="card-title">
          <text class="text-bold">我的服务</text>
        </view>
        <view class="grid-4">
          <template v-for="item in serviceList">
            <view class="flex-col items-center" @click="navTo(item.routerName)">
              <view class="iconfont order-icon" v-html="item.icon"></view>
              <view class="text-12 pt-8">{{ item.name }}</view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <LoginModel :show.sync="showLogin" @afterLogin="afterLogin"></LoginModel>
    <u-action-sheet
      closeOnClickOverlay
      @close="identityShow = false"
      :actions="identityList"
      :show="identityShow"
      @select="selectClick"
    ></u-action-sheet>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import LoginModel from "./loginModel.vue";
import {
  fetchCustomerIdentityList,
  fetchCustomerAccount,
} from "@/services/api";
export default {
  components: {
    LoginModel,
  },
  data() {
    return {
      currentAccountTab: 1,
      identityShow: false,
      accountTabList: [
        {
          name: "今日",
        },
        {
          name: "昨日",
        },
        {
          name: "本月",
        },
        {
          name: "上月",
        },
      ],
      showLogin: false,
      orderList: [
        {
          name: "待付款",
          icon: "&#xe704;",
        },
        {
          name: "待发货",
          icon: "&#xe669;",
        },
        {
          name: "待收货",
          icon: "&#xe68e;",
        },
        {
          name: "评价中心",
          icon: "&#xe631;",
        },
        {
          name: "退款",
          icon: "&#xe602;",
        },
      ],
      toolList: [
        // {
        // 	name: "产品中心",
        // 	icon: "&#xe617;"
        // },
        {
          name: "数据中心",
          icon: "&#xe616;",
          routerName: "dataCenter",
        },
        // {
        // 	name: "店铺服务",
        // 	icon: "&#xe64a;"
        // },
        // {
        // 	name: "社区团批",
        // 	icon: "&#xe68e;"
        // },
        // {
        // 	name: "购物清单",
        // 	icon: "&#xe74a;"
        // },

        {
          name: "邀请会员",
          icon: "&#xe623;",
        },
      ],
      navbarBgColor: "transparent",
      navbarTitleStyle: "color:white",
      // 用户类型
      bizRoleTypeList: [3, 4],
      // 账户信息
      customerObj: {
        balance: { balance: 0 },
        accumulatedIncome: { balance: 0 },
        pendingSettlement: { balance: 0 },
      },
    };
  },
  computed: {
    ...mapGetters("user", {
      hasLogin: "hasLogin",
      customerInfo: "getCustomerInfo",
      identity: "getIdentity",
      identityList: "getIdentityList",
    }),
    isAuthority() {
      //是否是 商户或 代理商
      return this.bizRoleTypeList.includes(this.identity.bizRoleType);
    },
    serviceList() {
      const list = [
        {
          name: "收货地址",
          icon: "&#xe645;",
          routerName: "shippingAddressManage",
        },
        // {
        // 	name: "礼物列表",
        // 	icon: "&#xe637;"
        // },
        // {
        // 	name: "常见问题",
        // 	icon: "&#xe68a;"
        // },
        // {
        // 	name: "关于我们",
        // 	icon: "&#xe604;"
        // },
        // {
        // 	name: "我的申诉",
        // 	icon: "&#xe607;"
        // },
        // {
        // 	name: "我的开票",
        // 	icon: "&#xe605;"
        // },
      ];

      //开通会员
      if (this.customerInfo?.vipFlag) {
		const identityBizRoleType = this.identityList.map(item => item?.bizRoleType);
		console.log(identityBizRoleType)
        if (!identityBizRoleType.includes("6")) {
          list.push({
            name: "团长申请",
            icon: "&#xe679;",
            routerName: "applyForLeader",
          });
        }
        if (!identityBizRoleType.includes("8")) {
          list.push({
            name: "商户入驻",
            icon: "&#xe800;",
            routerName: "applyForMerchant",
          });
        }
        return list;
      }
      return [
        ...list,
        {
          name: "开通会员",
          icon: "&#xe60d;",
          routerName: "registerMember",
        },
      ];
    },
  },
  methods: {
    ...mapMutations("user", {
      afterLogin: "afterLogin",
      setIdentityList: "setIdentityList",
      setCurrentIdentity: "setCurrentIdentity",
    }),
    onPageScroll(e) {
      if (e.scrollTop > 44 && this.navbarBgColor === "transparent") {
        this.navbarBgColor = "#f5f6f7";
        this.navbarTitleStyle = "color:black";
      }
      if (e.scrollTop < 44) {
        this.navbarBgColor = "transparent";
        this.navbarTitleStyle = "color:white";
      }
    },
    changeAccountTab(index) {
      this.currentAccountTab = index;
    },
    goToMyOrder(index) {
      if (index < 3) {
        this.$Router.push({
          name: "myOrder",
          params: {
            type: index,
          },
        });
      }
      if (index === 3) {
        //评价中心
        this.$Router.push({
          name: "commentCenter",
        });
      }
      if (index === 4) {
        //退货
        this.$Router.push({
          name: "saleRefund",
        });
      }
    },
    navTo(routerName) {
      if (routerName) {
        this.$Router.push({
          name: routerName,
        });
      }
    },
    navToMyCustomer() {
      this.$Router.push({
        name: "dataCenter",
        params: {
          type: 1,
        },
      });
    },
    goCouponList() {
      this.$Router.push({
        name: "couponList",
      });
    },
    goIntegralCenter() {
      this.$Router.push({
        name: "integralCenter",
      });
    },
    handelUserCard() {
      if (this.hasLogin) {
        this.$Router.push({
          name: "myInfo",
        });
      } else {
        this.showLogin = true;
      }
    },
	// 我的账户
    handelAccount() {
      this.$Router.push({
        name: "myAccount",
      });
    },
    //点击切换身份
    async handelChangeIdentity() {
      const { data, error } = await fetchCustomerIdentityList();
      if (!error) {
        //设置用户身份列表
        this.setIdentityList(data);
        console.log("当前省份", this.identityList);
        this.identityShow = true;
      }
    },
    selectClick(item) {
      this.setCurrentIdentity({ ...item, bizRoleType: item.bizRoleType - 0 });
      if (this.isAuthority) {
        this.getCustomerInfo();
      }
    },
    // 获取客户信息
    async getCustomerInfo() {
      const { data, error } = await fetchCustomerAccount();

      if (!error) {
        const { balance, pendingSettlement, accumulatedIncome } = data;
        this.customerObj = {
          balance: balance ? { balance: balance.balance || 0 } : { balance: 0 },
          pendingSettlement: pendingSettlement
            ? { balance: pendingSettlement.balance || 0 }
            : { balance: 0 },
          accumulatedIncome: accumulatedIncome
            ? { balance: accumulatedIncome.balance || 0 }
            : { balance: 0 },
        };
      }
    },
  },
  onLoad() {},
  onShow() {
    //未登录时显示登录页面
    if (!this.hasLogin) {
      this.showLogin = true;
    }
    if (this.isAuthority) {
      this.getCustomerInfo();
    }
  },
};
</script>
<style>
page {
  background: linear-gradient(155deg, #d3ede8 0%, #edf4f5 100%);
}
</style>
<style lang="scss" scoped>
.page-user {
  height: 100vh;

  .goods-recommend {
    background: #f5f5f5;
    border-radius: 8rpx;
  }

  .accountInfo {
    box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
    background: #fff;
    border-radius: 32rpx;
    height: 500rpx;

    .accountInfo-top {
      padding: 24rpx 0;
      border-radius: 32rpx 32rpx 0 0;
      background: linear-gradient(155deg, #01ba90 0%, #65c794 100%);
      color: white;
      height: 204rpx;
    }

    .account-tab-item {
      width: 25%;
      text-align: center;
      height: 64rpx;

      font-size: 28rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
    }

    .account-tab-item-active {
      background: #e4f7f4;
      color: $u-primary;
    }

    .order-info-item {
      text-align: center;
    }
  }

  .card {
    background: #fff;
    box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
    border-radius: 32rpx;
    padding: 24rpx;

    .card-title {
      font-size: 32rpx;

      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .coupon-card {
    background: #fff;
    box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
    border-radius: 16rpx;
    display: flex;
    padding: 24rpx;
  }

  .message-icon {
    font-size: 40rpx;
    color: #666;
  }

  .order-icon {
    padding-top: 24rpx;
    font-size: 50rpx;
    color: #666;
  }
}
</style>
